<template>
  <el-dialog
    title="为角色分配权限"
    :visible.sync="dialogVisible"
    width="30%"
    :close-on-click-modal="false"
  >
    <el-alert v-if="!roleId" title="请选择正确的角色" type="error" effect="dark"></el-alert>
    <div style="overflow-x: hidden;">
      <ul v-if="roleId" id="treePermissionsForRole" style="height:320px;" class="ztree ztreeMd"></ul>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" :loading="isSubmitLoading" @click="save()">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getRoleForEdit, updateRolePermissions } from "@/api/role";
import { getAllPermissions } from "@/api/permisson";
import $ from "@/vendor/jquery";
import "ztree";
import "ztree/css/zTreeStyle/zTreeStyle.css";

export default {
  data() {
    return {
      roleId: 0,
      dialogVisible: false,
      isSubmitLoading: false,
      setting: {
        view: {
          showIcon: false
        },
        check: {
          enable: true,
          chkboxType: { Y: "ps", N: "ps" }
        },
        data: {
          simpleData: {
            enable: true
          }
        },
        callback: {
          onClick: this.zTreeOnClick,
          onRightClick: this.zTreeOnRightClick
        }
      }
    };
  },
  methods: {
    show(id) {
      this.roleId = id;
      $.fn.zTree.init($("#treePermissionsForRole"), this.setting, []); // 先清空树
      this.isSubmitLoading = false;
      this.dialogVisible = true;
      if (this.roleId) {
        const zNodes = [];

        getRoleForEdit(this.roleId).then(permisssionNames => {
          getAllPermissions().then(result => {
            result.fieldList.forEach(p => {
              const name = p.name;
              zNodes.push({ id: p.code, pId: p.parentCode, permissionId: p.id, name: p.name, open: p.isOpen, checked: permisssionNames.authorityInfos.filter(m => m.id == p.id).length });
            });
            $.fn.zTree.init($("#treePermissionsForRole"), this.setting, zNodes);
          });
        });
      }
    },
    save() {
      this.isSubmitLoading = true;
      const treeObj = $.fn.zTree.getZTreeObj("treePermissionsForRole");
      const nodes = treeObj.getCheckedNodes(true);
      const input =  nodes.map(item => item.permissionId);
      updateRolePermissions(this.roleId,input)
        .then(() => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
          this.close();
        })
        .catch(() => {
          this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
        });
    },
    close() {
      this.dialogVisible = false;
      this.isSubmitLoading = false; // 无论成功失败，都把按钮的loading状态取消
    },
    zTreeOnClick(event, treeId, treeNode) {
      if (!treeNode) {
        return;
      }
      const treeObj = $.fn.zTree.getZTreeObj(treeId);
      treeObj.expandNode(treeNode);
    },

    zTreeOnRightClick(event, treeId, treeNode) {
      if (!treeNode) {
        return;
      }
      const treeObj = $.fn.zTree.getZTreeObj(treeId);
      treeObj.checkNode(treeNode, !treeNode.checked, true);
    }
  }
};
</script>
